<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
      <el-form-item label="视频标题" prop="title">
        <el-input v-model="dataForm.title" placeholder="请输入视频标题"/>
      </el-form-item>

      <el-form-item label="视频内容" prop="content">
        <el-input v-model="dataForm.content" placeholder="请输入视频内容"/>
      </el-form-item>

      <el-form-item label="类别" prop="categoryId">
        <el-select v-model="dataForm.categoryId" placeholder="请选择视频分类">
          <el-option v-for="item in allCategory" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="视频" prop="video">
        <upload-video v-model="dataForm.video"/>
        <div v-if="dataForm.video" style="margin-top: 10px">
<!--          <video width="80%" :src="dataForm.video" preload="auto" controls="controls"></video>-->
          <video-player  class="video-player vjs-custom-skin"
                         ref="videoPlayer"
                         :playsinline="true"
                         :options="playerOptions"
          ></video-player>
        </div>
      </el-form-item>

      <el-form-item label="视频封面" prop="cover">
        <upload-image v-model="dataForm.cover"/>
        <div v-if="dataForm.cover" style="margin-top: 10px">
          <img :src="dataForm.cover" style="width: 80%" preview preview-text="描述">
        </div>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { putVideo, postVideo, getVideo } from '@/api/video'
import { getAllCategory, deleteVideoById } from '@/api/category'
import UploadImage from '@/components/UploadImage'
import UploadVideo from '@/components/UploadVideo'
const defaultDataForm = { title: '',content: '', categoryId: '', video: undefined, cover: undefined, createTime: '', updateTime: '' }

export default {
  components: { UploadImage, UploadVideo},
  data() {
    return {
      visible: false,
      dataForm: defaultDataForm,
      category: Object,
      allCategory: [],
      dataRule: {
        title: [
          { required: true, message: '视频标题不能为空', trigger: 'blur' },
          { max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '视频描述不能为空', trigger: 'blur' },
          { max: 100, message: '长度在 1 到 1000 个字符', trigger: 'blur' }
        ],
        categoryId: [
          { required: true, message: '分类不能为空', trigger: 'blur' }
        ]
      },
      // 视频播放
      playerOptions : {
        playbackRates : [ 0.5, 1.0, 1.5, 2.0 ], //可选择的播放速度
        autoplay : false, //如果true,浏览器准备好时开始回放。
        muted : false, // 默认情况下将会消除任何音频。
        loop : false, // 视频一结束就重新开始。
        preload : 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language : 'zh-CN',
        aspectRatio : '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid : true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources : [ {
          type : "",
          src : ''//url地址
        } ],
        poster : "", //你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage : '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar : {
          timeDivider : true,//当前时间和持续时间的分隔符
          durationDisplay : true,//显示持续时间
          remainingTimeDisplay : false,//是否显示剩余时间功能
          fullscreenToggle : true  //全屏按钮
        }
      }


    }
  },
  methods: {
    init(id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          getVideo(id).then(response => {
            this.dataForm = response.data
            this.playerOptions.sources[1] = this.dataForm.video
            this.category = response.data.category
          })
        } else {
          this.dataForm = defaultDataForm
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (!this.dataForm.cover) {
            this.dataForm.cover = undefined
          }
          if (this.dataForm.id) {
            putVideo(this.dataForm).then(response => {
              this.$message.success('修改用户成功')
              this.visible = false
              this.$emit('refreshDataList')
            })
          } else {
            postVideo(this.dataForm).then(response => {
              this.$message.success('添加用户成功')
              this.visible = false
              this.$emit('refreshDataList')
            })
          }
        }
      })
    },
    //查询全部分类
    getAllCategory(){
      getAllCategory().then(res=>{
        this.allCategory = res.data || []
      }).catch(err=>{
        console.log(err)
      })
    }
  },
  mounted(){
    this.getAllCategory()
    setInterval(console.log(this.dataForm),3000)
  },
}
</script>
